<template>
  <ag-popup
    v-model="controlHeight_visible"
    :title="ifEdit ? '编辑图层' : '添加图层'"
    class="service-info-config"
    @onCancel="handleCancel"
  >
    <div>
      <label>图层名称</label>
      <el-input size="small" v-model="dataForm.name"></el-input>
    </div>
    <div>
      <label>索引/图层表名</label>
      <el-input size="small" v-model="dataForm.layername"></el-input>
    </div>
    <div>
      <label>服务地址</label>
      <el-input size="small" v-model="dataForm.hosturl"></el-input>
    </div>
    <div>
      <label>高度字段</label>
      <el-input size="small" v-model="dataForm.basearea"></el-input>
    </div>
    <div>
      <label>uniqueId字段</label>
      <el-input size="small" v-model="dataForm.uniqueid"></el-input>
    </div>
    <div>
      <label>关联白膜数据ID</label>
      <el-input size="small" v-model="dataForm.whiteid"></el-input>
    </div>
    <div class="button-group">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="dataFormSubmit">确定</a-button>
    </div>
  </ag-popup>
</template>

<script>
import AgPopup from "@/views/components/precut/AgPopup";
export default {
  components: {
    AgPopup,
  },
  data() {
    return {
      dataForm: {
        hosturl: "",
        layername: "",
        whiteid: "",
        uniqueid:"",
      },
      controlHeight_visible: false,
      ifEdit: false,
    };
  },
  methods: {
    //表格内容初始化
    init(_editItem) {
      this.dataForm = {
        name:'',
        layername: "",
        hosturl: "",
        basearea: "",
        whiteid: "",
        uniqueid:"",
        id: "",
      };
      this.ifEdit = false;
      if (_editItem) {
        this.ifEdit = true;
        this.dataForm = Object.assign(this.dataForm, {
          hosturl: _editItem.hosturl,
          layername: _editItem.layername,
          whiteid: _editItem.whiteid,
          name: _editItem.name,
          id: _editItem.id,
          basearea: _editItem.basearea,
          uniqueid: _editItem.uniqueid,
        });
      }
      this.controlHeight_visible = true;
    },
    //修改/编辑/增加的表格内容提交
    dataFormSubmit() {
      if (!this.ifEdit) {
        this.dataForm.id = Cesium.createGuid();
        this.$emit("addSupportLayers",this.dataForm);
      } else {
        this.$emit("editSupportLayers",this.dataForm);
      }
      this.controlHeight_visible = false;
    },
    //处理取消按钮，关闭编辑弹框
    handleCancel() {
      this.controlHeight_visible = false;
    },
  },
};
</script>
<style scoped>
.service-info-config {
  width: 400px;
  /* height: 420px; */
}
.service-info-config /deep/ .ag-pop-box-body {
  padding: 10px !important;
}
.service-info-config .ant-input{
  background:transparent;
  color:#fff;
}
.button-group {
  margin-top: 10px;
  text-align: right;
}
.button-group .ant-btn {
  margin: 10px;
}
.button-group :first-child{
  background: transparent;
  color: #fff;
}
.button-group :first-child :hover {
  border-color: #1E90FF;
}

</style>
